<div class="container">
  <!-- <div class="view-module-header border-bottom">
    <div class="module-title fl">【{{ RoleInfo.name }}】详情</div>
    <div class="fr mt20">
      <button nz-button class="mr20" [nzType]="'primary'" (click)="clickskip()">添加人员</button>
    </div>
  </div> -->
  <div class="view-module-container">
    <div nz-row class="row-box">
      <div nz-col nzSpan="6">
        <div class="row-item">
          <label>角色名称:</label>
          <span>{{ RoleInfo.name }}</span>
        </div>
        <div class="row-item">
          <label>创建时间:</label>
          <span>{{ RoleInfo.createTime | date:'yyyy-MM-dd HH:mm' }}</span>
        </div>
        <div class="row-item">
          <label>角色成员:</label>
          <span>{{ RoleInfo.memberUser }}</span>
        </div>
      </div>
      <div nz-col nzSpan="18">
        <div class="mb20 ml20 fs24">角色权限</div>
        <div class="box-show role-box">
          <div *ngFor="let item of PermitssList">
            <div class="role-name">{{ item.groupName }}</div>
            <div class="role-jurisdiction">
              <div nz-row>
                <div nz-col nzSpan="2" *ngFor="let item1 of item.value"><label>{{ item1.permitName }}</label></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <nz-modal [(nzVisible)]="isRersonnelVisible" [nzTitle]="'添加角色【'+ RoleInfo.name + '】人员'"
    (nzOnCancel)="isRersonnelVisible = false">
    <div class="example-input">
      <input class="ant-input" [(ngModel)]="keyword" nz-input placeholder="输入人员姓名" nzSize="default" />
      <button nz-button nzType="primary" nzValue="large" class="ml20" (click)="personnelList()">查询</button>
    </div>
    <ng-container *ngIf="personnellistOfData && personnellistOfData.length">
      <div class="item-list" *ngFor="let item of personnellistOfData">
        <nz-checkbox-wrapper style="width: 100%;">
          <p nz-checkbox [nzValue]="item.name" [(nzChecked)]="item.checked">{{item.name}}</p>
        </nz-checkbox-wrapper>
      </div>
    </ng-container>

    <div class="no-data" *ngIf="personnellistOfData && personnellistOfData.length == 0">暂无数据</div>
    <div *nzModalFooter>
      <button nz-button nzType="default" (click)="isRersonnelVisible = false">取消</button>
      <button nz-button nzType="primary" (click)="confirmInfo()">确认</button>
    </div>
  </nz-modal>
</div>